<template>
  <div class="footer">
    <div class="footer_copyright">&copy; Copyright. test.com</div>
    <div class="gotop" v-if="isShow" @click="gotopHandle">
      <i class="es-iconfont icon-arrow-up-bold"></i>
    </div>
  </div>
</template>

<script>
export default {
  name: "Footer",
  data() {
    return {
      isShow: false,
    };
  },
  created() {
    window.addEventListener("scroll", this.scrollHandle);
  },
  beforeDestroy() {
    window.removeEventListener("scroll", this.scrollHandle);
  },
  methods: {
    gotopHandle() {
      window.scrollTo(1, 1);
    },
    scrollHandle() {
      const that = this;
      that.timeout && clearTimeout(that.timeout);
      that.timeout = setTimeout(function () {
        let top = (document.documentElement || document.body).scrollTop,
          screenHeight = screen.height;
        if (top > screenHeight / 2) {
          that.isShow = true;
        } else {
          that.isShow = false;
        }
      }, 250);
    },
  },
};
</script>

<style lang="scss">
.footer {
  clear: both;
  padding: 1rem 0;
  color: var(--dark-light);
  .footer_copyright {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
.gotop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  border-radius: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 99998;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  cursor: pointer;
}
</style>
